<template>
  <div class="club-member-management">
    <div class="action-bar">
      <!-- 搜索框 -->
      <div class="search-container">
        <el-input
            v-model="clubMemberQueryRequest.userName"
            placeholder="输入用户名搜索"
            class="search-input"
            @keyup.enter="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button @click="handleSearch" type="primary">搜索</el-button>
      </div>
    </div>

    <!-- 成员列表 -->
    <el-table
        :data="paginatedMemberList"
        class="member-table"
        style="width: 100%"
    >
      <el-table-column prop="userId" label="用户编号" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="role" label="身份">
        <template #default="scope">
          <el-tag :type="scope.row.role === '社长' ? 'danger' : 'success'">
            {{ scope.row.role }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="grade" label="年级" />
      <el-table-column prop="major" label="专业" />
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
          v-model:current-page="clubMemberQueryRequest.current"
          :page-size="clubMemberQueryRequest.pageSize"
          :total="totalItems"
          layout="total, prev, pager, next"
          @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import {ElMessage} from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { useUserStore } from "../../../../stores/user.ts";
import {
  ClubControllerService,
  type ClubMemberQueryRequest,
  type ClubMembershipVO,
} from "../../../../../generated";
import {useRoute} from "vue-router";

// 定义成员数据结构
interface Member {
  userId: number;
  username: string;
  role: string;
  grade: string;
  major: string;
  class: string;
  contact: string;
}

const store = useUserStore();
const route = useRoute();
const clubId = Number(route.query.clubId);

const memberList = ref<Member[]>([]);
const totalItems = ref(0);
const clubMemberQueryRequest = ref<ClubMemberQueryRequest>({
  pageSize: 10,
  current: 1,
  clubId: clubId,
  userName: "",
});

const loadData = async () => {
  const res = await ClubControllerService.listUserVoInClubByPage(
      clubMemberQueryRequest.value,
  );
  if (res.code === 0) {
    const userVoList = res.data?.records as ClubMembershipVO[];
    memberList.value = userVoList.map(
        (memberShipVO) =>
            ({
              userId: memberShipVO.userVO?.id,
              username: memberShipVO.userVO?.userName,
              role: memberShipVO.identity === "member" ? "成员" : "社长",
              grade: memberShipVO.userVO?.grade,
              class: memberShipVO.userVO?.userClass,
              contact: memberShipVO.userVO?.phoneNumber,
            }) as Member,
    );
    totalItems.value = userVoList.length;
  } else {
    ElMessage.error("加载数据失败：" + res.message);
  }
};

const paginatedMemberList = computed(() => {
  const start =
      ((clubMemberQueryRequest.value.current as number) - 1) *
      (clubMemberQueryRequest.value.pageSize as number);
  const end = start + (clubMemberQueryRequest.value.pageSize as number);
  return memberList.value.slice(start, end);
});

onMounted(() => {
  loadData();
});

const handleSearch = () => {
  clubMemberQueryRequest.value.current = 1;
  loadData();
};

// 页码改变处理
const handlePageChange = (page: number) => {
  clubMemberQueryRequest.value.current = page;
  loadData();
};
</script>

<style scoped>
.club-member-management {
  padding: 20px;
  background: white;
  padding: 20px;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-container {
  display: flex;
  align-items: center;
}

.search-input {
  width: 300px;
}

.search-input {
  width: 300px;
  margin-right: 10px;
}

.club-member-management {
  padding: 20px;
  width: 100%; /* 确保管理区域占满父容器宽度 */
}

.member-table {
  width: 100%;
  table-layout: fixed; /* 使用固定表格布局 */
}

.member-table ::v-deep(.el-table__inner-wrapper) {
  width: 100%; /* 确保内部包装器也是 100% 宽度 */
}

.member-table ::v-deep(.el-table__header),
.member-table ::v-deep(.el-table__body) {
  width: 100% !important; /* 强制表头和表体宽度为 100% */
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
